
<template>
  <el-form
    :model="account"
    :rules="rules"
    ref="account"
    label-width="100px"
    class="demo-ruleForm"
  >
    <!-- <h3 class="login-title">欢迎登录</h3>
        <el-form-item label="活动名称" prop="name">
    <el-input v-model="account.name"></el-input> 
 
  </el-form-item>-->

    <el-row>
      <el-col :span="8"></el-col>
      <el-col :span="8">
        <el-form-item label="账号" prop="username">
          <!--required -->
          <el-input placeholder="请输入账号" v-model="account.username" />
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            placeholder="请输入密码"
            v-model="account.password"
          />
        </el-form-item>
        <el-form-item>
          <!-- <Verify
            @success="success"
            :mode="pop"
            :captchaType="blockPuzzle"
            :imgSize="{ width: '330px', height: '155px' }"
            ref="verify"
          ></Verify>
          //mode="pop"模式
          <button @click="useVerify">调用验证组件</button> -->
        </el-form-item>
        <el-form-item>
          <el-button
            class="Login"
            type="primary"
            v-on:click="onSubmit('loginForm')"
            >登录</el-button
          >
        </el-form-item>
      </el-col>
      <el-col :span="8"></el-col>
    </el-row>
  </el-form>
</template>


<script>
import instance from "../Utils/Request";
//import Verify from "../components/verifition/Verify"; //"../components/verifition/Verify";
export default {
  name: "Login",
  components: {
  //  Verify,
  },
  data() {
    return {
      account: {
        //name:'',
        username: "",
        password: "",
      },
      // 表单验证，需要在 el-form-item 元素中增加 prop 属性
      rules: {
        name: [{ required: true, message: "账号不可为空", trigger: "blur" }],
        username: [
          { required: true, message: "账号不可为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不可为空", trigger: "blur" },
        ],
      },

      // 对话框显示和隐藏
      dialogVisible: false,
    };
  },
  methods: {
    onSubmit() {
      this.$router.push("/Home");
      // 为表单绑定验证功能
      instance.post("Login/Login", JSON.stringify(this.account)).then((res) => {
        console.log(res);
         this.$router.push("/Home");
      });
    }
  },
};
</script>

<style>
.demo-ruleForm {
  margin-top: 10%;
}

.slidercaptcha {
  margin: 0 auto;
  width: auto;
  min-width: 314px;
  height: 286px;
  border-radius: 4px;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.125);*/
  margin: 5px 0 5px 0;
}

.slidercaptcha .card-body {
  padding: 1rem;
}

.slidercaptcha canvas:first-child {
  border-radius: 4px;
  border: 1px solid #e6e8eb;
}

.slidercaptcha.card .card-header {
  background-image: none;
  background-color: rgba(0, 0, 0, 0.03);
}
</style>
